﻿@model IList<Nop.Web.Models.ShoppingCart.ShoppingCartModel.CheckoutAttributeModel>
@using Nop.Core.Domain.Catalog;
@if (Model.Count > 0)
{
    <div class="checkout-attributes-module">
        <div class="title">Checkout Attributes</div>

        <div class="attributes-module">
            @foreach (var attribute in Model)
            {
                string controlId = string.Format("checkout_attribute_{0}", attribute.Id);
                string textPrompt = !string.IsNullOrEmpty(attribute.TextPrompt) ? attribute.TextPrompt : attribute.Name;
                <div class="attribute-item">
                    <div class="attribute-name">
                        <label class="text-prompt">
                            @textPrompt
                        </label>
                        @if (attribute.IsRequired)
                            {
                        <span class="required">*</span>
                            }
                    </div>
                    <div class="attribute-values">
                        @switch (attribute.AttributeControlType)
                    {
                        case AttributeControlType.DropdownList:
                            {
                        <select name="@(controlId)" id="@(controlId)" class="form-control">
                            @if (!attribute.IsRequired)
                                    {
                                    <option value="0">---</option>
                                    }
                            @foreach (var attributeValue in attribute.Values)
                                    {
                                    <option selected="@attributeValue.IsPreSelected" value="@attributeValue.Id">
                                        @attributeValue.Name
                                        @(!String.IsNullOrEmpty(attributeValue.PriceAdjustment) ? " [" + attributeValue.PriceAdjustment + "]" : null)
                                    </option>
                                    }
                        </select>
                            }
                            break;
                        case AttributeControlType.RadioList:
                            {
                        <ul class="option-list">
                            @foreach (var attributeValue in attribute.Values)
                                    {
                                    <li>
                                        <input id="@(controlId)_@(attributeValue.Id)" type="radio" name="@(controlId)" value="@attributeValue.Id" checked="@attributeValue.IsPreSelected" />
                                        <label for="@(controlId)_@(attributeValue.Id)">@attributeValue.Name @(!String.IsNullOrEmpty(attributeValue.PriceAdjustment) ? " [" + attributeValue.PriceAdjustment + "]" : null)</label>
                                    </li>
                                    }
                        </ul>
                            }
                            break;
                        case AttributeControlType.Checkboxes:
                        case AttributeControlType.ReadonlyCheckboxes:
                            {
                        <ul class="option-list">
                            @foreach (var attributeValue in attribute.Values)
                                    {
                                    <li>
                                        <input id="@(controlId)_@(attributeValue.Id)" type="checkbox" name="@(controlId)" value="@attributeValue.Id" checked="@attributeValue.IsPreSelected" @(attribute.AttributeControlType == AttributeControlType.ReadonlyCheckboxes ? Html.Raw(" disabled=\"disabled\"") : null) />
                                        <label for="@(controlId)_@(attributeValue.Id)">@attributeValue.Name @(!String.IsNullOrEmpty(attributeValue.PriceAdjustment) ? " [" + attributeValue.PriceAdjustment + "]" : null)</label>
                                    </li>
                                    }
                        </ul>
                            }
                            break;
                        case AttributeControlType.ColorSquares:
                            {
                        <ul class="option-list color-squares" id="color-squares-@(attribute.Id)">
                            @foreach (var attributeValue in attribute.Values)
                                    {
                                    <li @(attributeValue.IsPreSelected ? @Html.Raw(" class=\"selected-value\"") : null)>
                                        <label for="@(controlId)_@(attributeValue.Id)">
                                            <span class="color-container" title="@attributeValue.Name @(!String.IsNullOrEmpty(attributeValue.PriceAdjustment) ? " [" + attributeValue.PriceAdjustment + "]" : null)">
                                                <span class="color" style="background-color:@(attributeValue.ColorSquaresRgb);">&nbsp;</span>
                                                <i></i>
                                            </span>
                                            <input id="@(controlId)_@(attributeValue.Id)" type="radio" name="@(controlId)" value="@attributeValue.Id" checked="@attributeValue.IsPreSelected" />
                                            @*uncomment below to display attribute value name*@
                                            @*<span class="name">@attributeValue.Name @(!String.IsNullOrEmpty(attributeValue.PriceAdjustment) ? " [" + attributeValue.PriceAdjustment + "]" : null)</span>*@
                                        </label>
                                    </li>
                                    }
                        </ul>
                        <script type="text/javascript">
                                    seajs.use("jquery", function ($) {
                                        $(function () {
                                            $("#color-squares-@(attribute.Id)").on("click", ".color-container", function (event) {
                                                var $this = $(this);
                                                $("#color-squares-@(attribute.Id)").find("li").removeClass("selected-value");
                                                $this.next("input").trigger("click");
                                                $(this).closest('li').addClass('selected-value');
                                            }); 
                                        });
                                    });

                        </script>
                            }
                            break;
                    }
                    </div>
                </div>
            }
        </div>

    </div>
}
